import React, { Component } from 'react';

import {Link} from 'react-router';
import { Button ,Modal} from 'antd';


class App extends Component {
   state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div className="App">
          <div className="header">
            <img src={require("./component/static/images/logo.png")} alt="logo"/>
            <ul>
              <li><Link to="/Home" activeClassName="active" onlyActiveOnIndex={true} >首页</Link></li>
              <li  onClick={this.showModal}>漏洞/情报上报</li>
              <li><Link to="/Asign" activeClassName="active" onlyActiveOnIndex={true} >通知公告</Link></li>
              <li><Link to="/List" activeClassName="active" onlyActiveOnIndex={true} >贡献榜</Link></li>
              <li><Link to="/Gift" activeClassName="active" onlyActiveOnIndex={true} >礼品兑换</Link></li>
              <li className="login"><Button type="primary" onClick={this.showModal}>登录</Button></li>
            </ul>
          </div>
          <div className="content">
             {this.props.children}
          </div>
          
        
        <Modal
          title="微信登录"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p className="title">微信登录</p>
          <p><img src={require("./component/static/images/wx.jpg")}/></p>
          <p>请用微信扫描二维码登录</p>
          <p>“饿了么安全应急响应中心”</p>
        </Modal>
      
      </div>
    );
  }
}

export default App;
